<template>
  <div class="Check">
    <!-- 导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>进仓验货单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索框 -->
    <el-card class="search">
      <el-input
        class="input"
        v-model="input"
        placeholder="请输入关键字"
      ></el-input>
      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        icon="el-icon-search"
        style="margin-left: 6px"
      ></el-button>
      <!-- <el-button type="success" round @click="adddialogVisible = true"
        >新增进货单</el-button
      > -->
    </el-card>
    <!-- 主页面 -->
    <el-card class="main">
      <!-- 表格主体 -->
      <el-row>
        <el-table
          :data="
            dataList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
          "
          border
          style="width: 100%"
        >
          <el-table-column label="进仓验货单号" type="index" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.cfid }}</span>
            </template></el-table-column
          >
          <el-table-column label="采购单号" width="140px">
            <template slot-scope="scope">
              <span>{{ scope.row.pcid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="卖方" width="140px">
            <template slot-scope="scope">
              <span>{{ scope.row.seller }}</span>
            </template>
          </el-table-column>
          <el-table-column label="买方" width="140px">
            <template slot-scope="scope">
              <span>{{ scope.row.buyer }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报表生成时间" width="140px">
            <template slot-scope="scope">
              <span text-align="center">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作员" width="140px">
            <template slot-scope="scope">
              <span text-align="center">{{ scope.row.opertor }}</span>
            </template>
          </el-table-column>
          <el-table-column label="签字时间" width="140px">
            <template slot-scope="scope">
              <span text-align="center">{{ scope.row.signtime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" width="100px">
            <template slot-scope="scope">
              <span text-align="center"
                >{{ scope.row.ischeck ? "已验收" : "未验收" }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                icon="el-icon-edit"
                v-show="!scope.row.ischeck"
                @click="show(scope.row)"
                >验货</el-button
              >
              <el-button
                size="mini"
                icon="el-icon-check"
                v-show="scope.row.ischeck"
                @click="show(scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteList(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
      >
      </el-pagination>

      <!-- 弹出详细进仓单信息 -->
      <el-dialog
        title="进仓验货单详细信息"
        :visible.sync="editdialogVisible"
        width="70%"
        @close="closed"
      >
        <template>
          <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item label="供应商简称" :span="2">{{
              nowmessage.seller
            }}</el-descriptions-item>
            <el-descriptions-item label="进仓验货单号">{{
              nowmessage.cfid
            }}</el-descriptions-item>
            <el-descriptions-item label="采购单号">{{
              nowmessage.pcid
            }}</el-descriptions-item>
            <el-descriptions-item
              v-if="nowmessage.ischeck"
              :span="2"
              label="报表生成时间"
              >{{ nowmessage.time }}</el-descriptions-item
            >
            <el-descriptions-item v-if="nowmessage.ischeck" label="操作员签名">
              <span>{{ nowmessage.opertor }}</span>
            </el-descriptions-item>
            <el-descriptions-item v-if="nowmessage.ischeck" label="签字时间">
              <span>{{ nowmessage.signtime }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <el-table :data="nowmessage.cflist" stripe style="width: 100%">
            <el-table-column prop="brand" label="品牌"></el-table-column>
            <el-table-column prop="type" label="纸种"> </el-table-column>
            <el-table-column prop="rank" label="级别"> </el-table-column>
            <el-table-column prop="perweight" label="克重"> </el-table-column>
            <el-table-column prop="guide" label="规格"> </el-table-column>
            <el-table-column prop="numUnit" label="总重量"> </el-table-column>
            <el-table-column prop="unit" label="单位"> </el-table-column>
            <el-table-column prop="jianID" label="件号"> </el-table-column>
            <el-table-column prop="kuwei" label="库位"> </el-table-column>
            <el-table-column prop="ischeck" label="签收情况">
              <template slot-scope="scope">
                <el-radio-group
                  v-if="!nowmessage.ischeck"
                  v-model="scope.row.ischeck"
                  @change="agreeChange(scope.row, scope.$index)"
                >
                  <el-radio :label="1">已签收</el-radio>
                  <el-radio :label="0">未签收</el-radio>
                </el-radio-group>
                <span v-else>{{
                  scope.row.ischeck ? "已签收" : "未签收"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="checkweight" label="实际验收质量">
              <template slot-scope="scope">
                <el-input
                  v-if="!nowmessage.ischeck"
                  placeholder="请输入实际验收数量"
                  type="number"
                  inputmode="decimal"
                  v-model.number="scope.row.checkweight"
                >
                </el-input>
                <span v-else>{{ scope.row.checkweight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <span slot="footer" class="dialog-footer" :data="dataList">
          <el-button @click="editdialogVisible = false">取 消</el-button>
          <el-button
            type="success"
            v-show="!nowmessage.ischeck"
            @click="update()"
            >验收</el-button
          >
          <el-button
            type="primary"
            v-show="!nowmessage.ischeck"
            @click="check()"
            >确认</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getAll,
  upsert,
  deleteList,
  check,
} from "../../network/CheckfreightManage";
import axios from "axios";
export default {
  data() {
    return {
      dataList: [], //装进仓单粗略信息
      nowmessage: {},
      index: 0, //粗略列表的序号
      radio: "1",
      cfid: "",
      checkflag: 1,
      ischeck: false,
      input: "",
      query: "",
      currentPage: 1,
      pagesize: 5,
      adddialogVisible: false,
      editdialogVisible: false,
      state: "正常",
      addCfList: {},

      cflist: [],
      changeList: [], //装改变后的数据
    };
  },

  //从接口获取数据
  created() {
    getAll().then((response) => {
      this.dataList = response.data.obj;
      for (var i = 0; i < this.dataList.length; i++) {
        this.dataList[i].cflist = JSON.parse(this.dataList[i].cflist);
      }
    });
  },
  methods: {
    update() {
      console.log(this.nowmessage);
      let temp = JSON.parse(JSON.stringify(this.nowmessage));
      temp.cflist = JSON.stringify(temp.cflist);
      upsert(temp)
        .then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "验货完成！",
              type: "success",
            });
          } else {
            this.$message("操作失败！");
          }
        })
        .catch(function (error) {
          console.log(error);
          this.$message("error");
        });
    },
    check() {
      check({ cfid: this.nowmessage.cfid })
        .then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "确认成功！",
              type: "success",
            });
            getAll()
              .then((res) => {
                let ret = res.data.obj;
                for (let i = 0; i < ret.length; i++)
                  ret[i].cflist = JSON.parse(ret[i].cflist);
                console.log(ret);
                this.dataList = ret;
              })
              .catch(function (error) {
                console.log(error);
              });
            this.editdialogVisible = false;
          } else {
            this.$message("确认失败！");
          }
        })
        .catch((err) => {
          this.$message(err);
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getlist() {},
    handleSizeChange(val) {
      console.log(val);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    closed() {
      // this.$refs.addFormRef.resetFields();
    },
    show(row) {
      this.nowmessage = JSON.parse(JSON.stringify(row));
      this.editdialogVisible = true;
    },
    deleteList(scope) {
      console.log(scope.cfid);
      this.$confirm("确认删除？")
        .then((_) => {
          deleteList({ id: scope.cfid })
            .then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  message: res.data.status,
                  type: "success",
                });
                getAll().then((response) => {
                  this.dataList = response.data.obj;
                  for (var i = 0; i < this.dataList.length; i++) {
                    this.dataList[i].cflist = JSON.parse(
                      this.dataList[i].cflist
                    );
                  }
                });
              } else {
                this.$message(res.data.status);
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.input {
  width: 30%;
}
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.btn {
  margin-left: 880px;
}
.el-table {
  margin-top: 15px;
}
.el-pagination {
  text-align: center;
}
.main,
.search {
  margin-inline: 15px;
  min-height: 100%;
  height: 100%;
}
.head {
  margin-top: 10px;
}
.input {
  width: 300px;
}
.main {
  margin-top: 5px;
}
</style>